<template>
  <div>
    <h1>vue2 vite electron</h1>
    <div class="">
      <label for="">userId:</label
      ><input :value="$store.state.user.userId" type="text" @change="onChange" /><br />
      <label>nickName:</label
      ><input :value="$store.state.user.nickName" type="text" @change="onChange2" /><br />
      <hr />
      <label>token:</label>
      <input :value="$store.state.user.token" type="text" @change="onChange3" />
      <input :value="$store.state.client.token" type="text" @change="onChange4" />
    </div>
    <button @click="batch">批量改</button>
    <button @click="newWindow">打开新窗口</button>
  </div>
</template>

<script>
import store from './store'
const { ipcRenderer } = window.electron

export default {
  setup() {
    const onChange = (e) => {
      store.commit('user/SetUserId', e.target.value)
    }
    const onChange2 = (e) => {
      store.commit('user/SetNickName', e.target.value)
    }
    const onChange3 = (e) => {
      store.commit('user/SetToken', e.target.value)
    }
    const onChange4 = (e) => {
      store.commit('client/SetToken', e.target.value)
    }
    const batch = () => {
      store.commit('user/SetUserId', Math.random() * 100 + '')
      store.commit('user/SetNickName', Math.random() * 100 + '')
      store.commit('user/SetToken', Math.random() * 100 + '')
      store.commit('client/SetToken', Math.random() * 100 + '')
    }
    const newWindow = () => {
      ipcRenderer.send('open-window', 'new')
    }
    return { onChange, onChange2, onChange3, onChange4, batch, newWindow }
  }
}
</script>
